<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../fonts/iconfont/iconfont.css">
		<script src="../../js/mui.min.js"></script>
		<script src="../../libs/artTemplate.js"></script>
		<script src="../../js/app/common.js"></script>
		<style type="text/css">
			body {
				background: rgb(71, 186, 254) !important;
			}

			header {
				background: #EEEEEE;
				font-weight: bold;
			}

			header p:first-child {
				color: white;
				background: #47BAFE;
				font-size: 26px;
				text-align: center;
			}

			* {
				-webkit-user-select: none;
				-ms-touch-select: none;
				padding: 0rem;
				margin: 0rem;
				touch-action: pan-y;
			}

			.mui-content{
				background: #47bafe;
			
			}

			.bgImg {
				height: 1.8rem;
				width: 100%;
				background-image: url(../../images/head_Bx.jpg);
				background-size: cover;
			}

			.customerInfo_box {
				padding: 0px;
			}

			.customerInfo_box .img {
				text-align: center;
				display: inline-block;
				width: 30%;
			}

			.customerInfo_box img {
				height: 0.8rem;
				width: 0.8rem;
				border-radius: 50%;
				transform: translateY(-0.3rem);
			}

			.ringt_info {
				width: 70%;
				display: inline-block;
				text-align: left;
				float: right;
				padding: 0.1rem 0rem;
			}

			.bxzh_box>h5 {
				border-left: 4px solid #47BAFE;
				padding-left: 0.05rem;
				font-size: 0.16rem;
				margin-left: 0.15rem;
				color: #000000;
			}

			.bxzh_box ul {
				padding: 0px 0.1rem;
				margin: 0rem 0.05rem;
				border-top: 1px solid #EEEEEE;
				border-bottom: none;
			}

			.bxzh_box ul:after {
				background: none !important;
			}

			.bxzh_box ul:before {
				background: none !important;
			}

			.bxzh_box ul li {
				padding-left: 0.05rem;
				padding-right: 0.05rem;
				font-size: 0.17rem;
				border-bottom: 1px solid #EEEEEE;
				padding: 0.15rem 0.05rem;

			}

			.bxzh_box ul li:last-child {
				border: none;
			}

			.bxzh_box ul li p {
				font-size: 0.14rem;
				margin: 0rem;
			}

			.mui-table-view li p {
				position: relative !important;
			}

			.insertbxbtn {
				text-align: center;

			}

			.insertbxbtn>button {
				width: 70%;
				border-color: #47BAFE;
				background: #47BAFE;
			}

			.mui-table-view p span {
				width: 33%;
				margin-right: 0.1rem;
				display: inline-block;
				font-size: 0.14rem;
				padding-top: 0.06rem;
			}

			.mui-table-view li {
				position: relative;
			}

			.mui-table-view .CPtype {
				background: #79c4e9;
				width: 0.80rem;
				color: #FFFFFF;
				height: 0.30rem;
				line-height: 0.30rem;
				border-radius: 5px;
				text-align: center;
				right: 0rem;
				position: absolute;
				font-size: 0.14rem;
				top: 0.5rem;
			}

			.sharebox {
				line-height: 0.5rem;
				padding-left: 0.15rem;
				height: 0.5rem;
			}

			.sharebox a {
				margin-right: 0.1rem;
				float: left;
				display: inline-block;
				font-size: 0.4rem;
				color: #62b900;
			}

			.sharebox a>img {
				transform: translateY(0.05rem);
			}

			.sales_card {
				box-shadow: 0 0 10px 0px #6289a0;
				padding: 0.13rem 0.1rem;
				display: flex;
				border-radius: 5px;
				margin: 0px 0.05rem;
				background: #fff;
			}

			.sales_card .img {
				display: inline-block;
				margin-right: 0.05rem;
				vertical-align: middle
			}

			.sales_card .col {
				width: 60%;
			}

			.sales_card .col:last-child {
				width: 40%;
				justify-content: flex-end;
			}

			.sales_card .col:last-child img {
				height: 0.9rem;
				width: 0.9rem;
				vertical-align: middle;
			}

			#backbtn {
				transform: translate(15px, 10px);
				background: rgba(0, 0, 0, 0.3);
				width: 0.35rem;
				border-radius: 50%;
				height: 0.35rem;
				line-height: 0.35rem;
				text-align: center;
				color: #FFFFFF;
			}

			#head_img {
				border-radius: 50%;
			}

			.HaiBaoBox {
				position: fixed;
				z-index: 999;
				width: 3rem;
				height: 3rem;
			}
			header:after{
				content:" ";
				clear: both;
				display: block;
			}
		</style>
		<script>
			(function(doc, win) {
				        var html = doc.getElementsByTagName("html")[0],
				        // orientationchange->手机屏幕转屏事件
				        // resize->页面大小改变事件(一边pc端有用)
				            reEvt = "orientationchange" in win ? "orientationchange" : "resize",
				            reFontSize = function() {
				                var clientW = doc.documentElement.clientWidth || doc.body.clientWidth;
				                if(!clientW) {
				                    return;
				                }
				                html.style.fontSize = 100 * (clientW / 420) + "px";
				        }
				        win.addEventListener(reEvt, reFontSize);
				
				        // DOMContentLoaded->dom加载完就执行,onload要dom/css/js都加载完才执行
				        doc.addEventListener("DOMContentLoaded", reFontSize);
				    })(document, window);
			</script>
	</head>
	<body>
		<div class="mui-content">
			<header style="padding: 0.18rem 0.1rem;    padding-top: 0.2rem; ">
				
			<div style="color: #47bafe;"><img src="../../fonts/iconfont/headicon.png" style="height: 0.3rem;vertical-align: middle;margin-top:-0.07rem; " alt=""> 来自<span id="name"></span>的保险组合分享</div>
			</header>
			<div style="margin-bottom: 0.05rem;">
				<img src="../../images/head_Bx.jpg" width="100%" alt="">
			</div>
			<div class="bxzh_box">
				<ul class="mui-table-view" id="baoxian_m"></ul>
			</div>
			<p></p>
			<div class="sales_card">
				<div class="col">
					<div class="img">
						<img id="head_img" src="../../images/default_pick_photo.png" style="height: 0.45rem; width: 0.45rem;" alt="">
					</div>
					<div style="display: inline-block;height: 0.5rem; vertical-align:middle;font-size:0.16rem ;line-height: 0.25rem;">
						<div style="font-size: 0.16rem;" id="YwyNm">没有填写名字</div>
						<p style="font-size: 0.13rem;margin: 0rem;" id="company">未填写所属公司</p>
					</div>
					<p></p>
					<p style="margin: 0rem; font-size: 0.14rem;">
						<i class="mui-icon mui-icon-phone" style="font-size:0.18rem;"></i>&nbsp; <span id="phone">未填写手机号</span></p>
					<p style="font-size: 0.14rem;margin: 0rem;"><i class="mui-icon mui-icon-weixin" style="font-size:0.18rem; color: #d1d1d1"></i>&nbsp;
						<span id="wechatNo">未填写微信号</span></p>
				</div>
				<div class="col">
					<div style="line-height: 0.9rem; height: 0.9rem;">
						<img id="wechat_img" style="display: block;margin: 0 auto;" src="http://img3.cache.netease.com/game/2013/11/26/20131126143638f53f4.png"
						 alt="">

						<span id="tipsImg" style="display: none; color: #999; font-size: 0.15rem; text-align: center;">快去添加二维码吧</span>
					</div>
					<!-- <p style="clear: both;"></p> -->
					<p style="font-size: 0.12rem;margin: 0rem;text-align: center;">添加微信，立即了解</p>
				</div>
			</div>
		</div>
		<script type="text/html" id="baoxian_tp">
			{{each DATASET as value}} {{if value!=''}}
				<li>
					<div>{{value.product_nm}}</div>
				<p><span>保费：{{value.product_fee}}元</span><span>保额：{{value.product_premium/10000}}万</span>&nbsp;&nbsp;<span>保险期限：{{value.product_period}}年</span><span>被保人：{{value.product_beneficial}}</span>
				{{if value.product_cover!=""}}
				<p style="background: #f1f6ff; padding: 0.05rem;margin: 0rem;margin-top: 0.05rem;">保障内容：{{value.product_cover}}</p>
				{{/if}}
				<div class="CPtype"style="padding-right: 0.05rem;padding-left: 0.05rem;">{{value.product_type}}</div>
				</p>
				</li>
			{{/if}}
			{{/each}}
		</script>
		<script>
			var shares = null;
			var sweixin = null;
			var wc = null,
				bitmap = null;
			mui.plusReady(function() {
				wc = plus.webview.currentWebview();
				// wc.setStyle({
				// 	height:document.body.clientHeight
				// });
				document.getElementById("name").innerText=wc.name.substring(0,1)+"**";
				storage.init();
				storageUser = kidstorageuser.getInstance();
				getInfo(wc.type, wc.custId);
					if(storageUser.company!=""){
					document.getElementById("company").innerText=storageUser.company;
					}
						if(storageUser.ImgUrl!=""){
									 var filename = storageUser.ImgUrl.substring(storageUser.ImgUrl.lastIndexOf("/") + 1, storageUser.ImgUrl.length);  
								var relativePath = "_doc/headimg/" + filename;  
								//判断本地是否存在此图片
								plus.io.resolveLocalFileSystemURL(relativePath , function(entry) {
									//存在就直接设置图片src
									console.log("存在");
										var sd_path = plus.io.convertLocalFileSystemURL(relativePath);  
										document.getElementById("head_img").setAttribute("src",sd_path);
										//转成手机绝对路径
								},function(e){
									console.log("不存在");
										document.getElementById("head_img").setAttribute("src",storageUser.ImgUrl);
								})
					}
				document.getElementById("YwyNm").innerText = storageUser.NickName;
				document.getElementById("phone").innerText = storageUser.TelNo;
				if (storageUser.wechatImg == "" || storageUser.wechatImg == null) {
					document.getElementById("wechat_img").style.display = "none";
					document.getElementById("tipsImg").style.display = "block";
				}
				document.getElementById("wechat_img").setAttribute("src", storageUser.wechatImg);
				document.getElementById("wechatNo").innerText = storageUser.wechatNo;

				bitmap = new plus.nativeObj.Bitmap("test");
				// 将webview内容绘制到Bitmap对象中


			})

			function getInfo(type, custId) {
				storage.init();
				storageUser = kidstorageuser.getInstance();
				mui.post("http://118.25.184.62:8000/cmdb/queryProductByCustID/", {
					sales_id: storageUser.UId,
					cust_id: custId
				}, function(data) {
					render("#baoxian_m","baoxian_tp",data)
					// alert(document.body.clientHeight);
					let ulobj = document.getElementById("baoxian_m").innerHTML;
					console.log(ulobj);
					if (ulobj != "") {
						setTimeout(function() {
							// alert(wc.getStyle().height);
							wc.draw(bitmap, function() {
								console.log('绘制图片成功');
								download(type);
							}, function(e) {
								console.log('绘制图片失败：' + JSON.stringify(e));
							});
						}, 300);
					}

				}, 'json');
			}

			function download(type) {
				bitmap.save("_doc/haibao.jpg", {}, function(i) {
				
					let webbx = plus.webview.getWebviewById("insurance/customerShare.html")
					mui.fire(webbx, "shareinfo", {
						url: i.target,
						type: type
					});
					console.log('保存图片成功：' + JSON.stringify(i));
				}, function(e) {
					console.log('保存图片失败：' + JSON.stringify(e));
				});
				// wb.show();

			}
		</script>
	</body>
</html>
